<template>
    <!-- 歌单组件 -->
    <div>
        <van-row justify="space-around" span="24" style="margin-top: 2vh;" @click="toMusicMenu()">
            <van-col span="6" style="text-align: center;">
                <strong>{{leftMsg}}</strong>
            </van-col>
            <van-col span="6"></van-col>
            <van-col span="6"></van-col>
            <van-col span="6" style="text-align: center;">{{rightMsg}}</van-col>
        </van-row>
        <!-- 滑动状态栏 -->
        <van-row span="24" style="overflow: scroll ;  margin-top: 1vh;">
            <van-col>
                <van-swipe :show-indicators="false" :loop="false" :width="140" style="height: 100%;">
                    <van-swipe-item v-for="item in playLists" :key="item.picUrl" style=" margin-right: 0.5rem;">
                        <van-row style="border: 1px solid #ccc; ">
                            <van-image width="100%" height='60%' fit="contain" position="top" :src="item.picUrl" />
                        </van-row>
                        <van-row>
                            <!-- 
                                ....
                                width: 100px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                             -->
                            <span style="font-size: 13px;">
                                {{playCountChange(item.playCount)}},{{item.name}}
                            </span>
                        </van-row>
                    </van-swipe-item>
                </van-swipe>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import { toRefs, reactive, ref, defineComponent, defineProps, onBeforeMount, onMounted } from 'vue'
    import { getPlayListsApi } from '../util/request.js'

    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex';
    export default ({
        name: 'PlayLists',
        props: {
            leftMsg: String,
            rightMsg: String,
            default: {},
        },
        setup(props, context) {
            const router = useRouter()
            const store = useStore()
            //点击推荐歌单
            const toMusicMenu = () => {
                router.push({
                    path: '/Music_Menu'
                })
            }
            const playCountChange = (num) => {
                if (num >= 10000) {
                    return (num / 10000).toFixed(1) + '万'
                } else if (num >= 10000000) {
                    return (num / 10000000).toFixed(1) + '千万'
                } else if (num >= 100000000) {
                    return (num / 100000000).toFixed(1) + '亿'
                }
            }
            onBeforeMount(async () => {
                //获取推荐歌单
                let playListsResult = await getPlayListsApi(12)
                data.playLists = playListsResult.data.result
                console.log(data.playLists);
            })
            // onMounted(()=>{
            //     console.log('组件测试data.playLists', data.playLists[0].picUrl,data.playLists[0].name);
            // }) 
            //点击更多

            const data = reactive({
                leftMsg: props.leftMsg,
                rightMsg: props.rightMsg,
                playLists: [],
            })
            return {
                ...toRefs(data),
                router,
                store,
                toMusicMenu,
                playCountChange,
            }
        }

    })
</script>

<style>

</style>